<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="layui/css/layui.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
    <script src="layui/layui.js"></script>
    <title>AddProduct</title>
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-xs6 layui-col-sm6 layui-col-md4">
            <form class="layui-form" lay-filter="*">
                <div class="layui-form-item">
                    <label class="layui-form-label">名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="name" name="name" placeholder="名称" autocomplete="off" lay-verType="tips"
                               class="layui-input" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">价格</label>
                    <div class="layui-input-block">
                        <input type="text" name="price" id="price" placeholder="价格" autocomplete="off"
                               class="layui-input" lay-verify="required|number">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">选择分类</label>
                    <div class="layui-input-block">
                        <select name="cid" id="category" lay-search lay-filter="aihao">
                            <option value="1">选择分类</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="*" id="submit">立即提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    layui.use('form', function () {
        let form = layui.form;
        form.on("submit(*)", function (arg) {
            console.log(arg);
            $.ajax({
                url: "addProduct", data: {"data": JSON.stringify(arg.field)}, complete: function (arg) {
                    console.log(arg)
                }
            });
            return false;
        })
    });
    $.ajax({
        url: "listcategory",
        complete: function (arg) {
            if (arg.responseText) {
                let cates = JSON.parse(arg.responseText);
                for (var i = 0; i < cates.length; i++) {
                    let cate = cates[i];
                    let option = "<option value=" + cate.id + ">" + cate.name + "</option>";
                    $("#category").append(option);
                    layui.form.render('select');
                }
            }
        }
    })
</script>
</body>
</html>